<template>
    <div style="margin-top: 1%">
        <Layout>
            <Sider style="background-color: #f4f4f4">
                <Card style="width:300px;height: 280px;" dis-hover bordered shadow>
                    <div style="text-align: center">
                        <Avatar size="80" :src="userInfo.uheadpicture"/>
                    </div>
                    <div style="margin-top: 3%;font-weight: bolder;font-size: larger;text-align: center">
                        {{userInfo.unickname}}
                    </div>
                    <div style="display: flex;justify-content: space-evenly;margin-top: 4%;">
                        <div v-if="userInfo.usex">男</div>
                        <div v-else>女</div>
                        <div v-show="userInfo.uadmin" style="color: red;font-weight: bolder">管理员</div>
                    </div>
                    <div style="text-align: left;margin-top: 4%;margin-left: 20px">
                        <Icon type="ios-call"/>
                        手 机 号：{{userInfo.uphone}}
                    </div>
                    <div style="text-align: left;margin-top: 4%;margin-left: 20px">
                        <Icon type="ios-calendar"/>
                        出生日期：{{userInfo.uBirthday}}
                    </div>
                    <div style="text-align: left;margin-top: 4%;margin-left: 20px">
                        <Icon type="ios-mail"/>
                        邮 箱 号：{{userInfo.uemail}}
                    </div>
                </Card>
            </Sider>
            <Content style="margin-left: 10%">
                <Menu mode="horizontal">
                    <MenuItem :name="userItem.name" v-for="(userItem,index) in userMenu" :key="index"
                              :to="userItem.path">
                        {{userItem.name}}
                    </MenuItem>
                </Menu>
                <div style="background-color: white;height: 510px">
                    <router-view/>
                </div>
            </Content>
        </Layout>
    </div>
</template>

<script>
  export default {
    data () {
      return {
        userInfo: {},
        userMenu: [],
        normaluserMenu: [
          {
            path: '/myIndex/userInfo',
            name: '修改个人信息'
          },
          {
            path: '/myIndex/updatePwd',
            name: '修改密码'
          },
          {
            path: '/myIndex/myInform',
            name: '我的通知'
          },
          {
            path: '/myIndex/myAdvice',
            name: '我的功能建议'
          },
          {
            path: '/myIndex/myBug',
            name: '我的BUG反馈'
          },
          {
            path: '/myIndex/myFriendBlog',
            name: '我的友链申请'
          }
        ],
        unusualNormalMenu: [
          {
            path: '/myIndex/userInfo',
            name: '修改个人信息'
          },
          {
            path: '/myIndex/myInform',
            name: '我的通知'
          },
          {
            path: '/myIndex/myAdvice',
            name: '我的功能建议'
          },
          {
            path: '/myIndex/myBug',
            name: '我的BUG反馈'
          },
          {
            path: '/myIndex/myFriendBlog',
            name: '我的友链申请'
          }
        ]
      }
    },
    mounted () {
      this.getUserInfo()
    },
    methods: {
      getUserInfo () {
        this.$http.get('user').then(res => {
          res = res.data
          if (res.code === 0) {
            this.userInfo = res.data
            // 判断是手机号登录还是三方登录
            if (res.data.uphone !== null && res.data.uphone !== '') {
              this.userMenu = this.normaluserMenu
            } else {
              this.userMenu = this.unusualNormalMenu
            }
          } else {
            this.$Message.error(res.msg)
          }
        })
      }
    }
  }
</script>

<style scoped>

</style>
